@charset "UTF-8";
@import "common/_common";

.web {
  header {
    .h_center {
      text-align: center;
      margin-top: r(45px);
      span {
        font-size: r(26px);
      }
    }
    .h_right {
      margin-top: r(38px);
      margin-right:r(55px);
      position: relative;
      i{
        font-size: r(50px);
        color:$color;
      }
      sub {
        width:r(27px);
        height: r(27px);
        line-height: r(27px);
        border-radius: 50%;
        color: #ffffff;
        background-color:#fa5050;
        position: absolute;
        right: 0;
        top:0;
      }
    }
  }
  main {
    .myself_login {
      width:95%;
      margin: 0 auto;
      position: relative;
      .user_img {
        width:r(170px);
        height:r(170px);
        overflow: hidden;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        img {
          width:100%;
        }
      }
      .user_setting {
        width: 70%;
        display: inline-block;
        vertical-align: middle;
        h3 {
          font-size: r(30px);
          color: #000;
        }
        p{
          font-size: r(26px);
          color: #9d9d9d;
          margin-top: r(20px);
        }
      }
      .us_right {
        position: absolute;
        font-size: r(60px);
        right: 0;
        top:50%;
        transform: translateY(-50%);
      }
    }
    .myself_possess {
      width:95%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding-top:r(26px);
      padding-bottom: r(36px);
      .mp_div{
        width: r(194px);
        height:r(150px);
        text-align: center;
        .mpd_icon {
          width:50%;
          height:r(100px);
          line-height: r(100px);
          margin: 0 auto;
          display: inline-block;
          img {
            width: 100%;
            display: inline-block;
            vertical-align: middle;
          }
        }
        p{
          width: 100%;
          font-size:r(26px);
          color: #000;
          text-align: center;
          margin-top: r(12px);
        }
      }
      .green {
        background-color: #b2e0a0;
      }
      .blue {
        background-color: #a0dce0;
      }
      .brown {
        background-color: #e0b7a0;
      }
    }
    .user_button {
      width:70%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      button {
        background-color: $color;
        width:r(146px);
        height:r(76px);
        border-radius: 50px;
        color: #fff;
        font-size: r(24px);
      }
    }
  }
}